<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>个人页面</title>
        <link rel="stylesheet" href="../../Content/bootstrap.css">
        <style media="screen">
        .{
            padding:0px; margin:0px;
        }
        a{
            text-decoration: none;
        }
        ul{
            padding: 0px;
            margin: 0px;
        }
        li{
            list-style: none;
            padding: 0px;
            margin: 0px;
        }
        body{
            background-color: #eee;
        }
        #main{
            width:80%;
            margin:50px auto;
        }
        #nav{
            width:100%;
            height:40px;
            border-radius: 5px;
            background-color:rgb(226, 82, 20);
            color:#fff;
            line-height: 38px;
            margin-bottom: 20px;
        }
        #nav>a{
            display: block;
            height:40px;
            width: 8%;
            line-height: 40px;
            text-align: center;
            color:#fff;
            border-radius: 5px;
            float: left;
        }
        #nav>a:hover{
            background-color: rgb(144, 9, 9);
        }
        /* personal data */
        #data{
            overflow: hidden;
            border-radius: 5px;
        }
        #left{
            width: 20%;
            float: left;
            background-color: #ddd;
            height: 500px;
        }
        #list{
            line-height: 36px;
        }
        /* left link */
        #list>li>a{
            text-indent: 20px;
            display: block;
            color:#678;
            width: 100%;
        }
        #list>li>a:hover{
            background-color: #ccc;
            color:#123;
        }
        /* right side */
        #right{
            background-color: #fff;
            width: 80%;
            float: right;
            /* 高度 */
        }
        #right-top{
            height: 50px;
            border-bottom: 1px solid #ccc;
            background-color: #fee;
            line-height: 50px;
            text-indent: 10px;
        }
        .table{
            border-bottom: 1px solid #bbb;
        }
        .goods>li{
            float: left;
        }
        .goods-img{
            border:1px solid #aaa;
            width:80px; height:80px;
            margin-left: 5%;
            margin-top: 5%;
        }
        .goods>li>a{
            display: inline-block;
            margin-left: 10px;
            width:90px;
            word-wrap: break-word;
            color:#466;
        }
        .goods>li>p{
            margin-left: 5%;
            width: 220px;
            word-wrap: break-word;
            height: 110px;
            color: #aaa;
        }
        /* 结算处 */
        #bar{
            height: 50px;
            overflow: hidden;
            background-color: #dde;
        }
        #bar>div{
            float: left;
            width: 33.333333%;
            height: 50px;
            text-align: center;
            line-height: 50px;
        }
        #bar>div>em{
            color:rgb(194, 60, 60);
            font-size: 24px;
        }
        #bar>div>input{
            display:block; height:50px; width:50%; float:right;
            font-size: 24px;
            border: 0px;
            background-color: #ccc;
            color:#fff;
        }
        #bar>div>input:hover{
            background-color: rgb(208, 69, 55);
        }
        </style>
    </head>
    <body>
        头部留白
        <div id="main">
            <div id="nav">
                <a href="#">首 页</a>
                <a href="#">购物车</a>
                <!-- 个人中心搜索框 -->
                <div style="padding-top:7px;padding-right:10px;">
                    <div style="width:30%; float:right; overflow:hidden; display:inline-block;height:26px;" class="input-group">
                        <input type="text" class="form-control" style="float:left;width:70%;height:26px;"/>
                        <!-- button -->
                        <input class="btn btn-default input-group-btn" type="button" value="搜索" style="float:left;width:30%;height:26px;line-height:10px;"/>
                    </div>
                </div>
            </div>
            <!-- 资料 -->
            <!-- left:3 right:7 -->
            <div id="data">
                <!-- left side -->
                <div id="left">
                    <div style=" width:150px; height:150px; border:5px solid #fff; margin:20px auto; background-image:url('./2.jpg'); background-size:100% 100%;">
                    </div>
                    <!-- 帐号 -->
                    <h4 style="text-align:center;"><strong>帐号管理</strong></h4>
                    <ul id="list">
                        <li><a href="#"><span class="glyphicon glyphicon-user">个人资料</span></a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-shopping-cart">购物车</span></a></li>
                        <li><a href="#"><span class="glyphicon glyphicon-wrench">更多</span></a></li>
                    </ul>
                </div>
                <!-- right side -->
                <div id="right">
                    <div id="right-top">
                        <span class="glyphicon glyphicon-shopping-cart" style="font-size:20px;">购物车<span>
                    </div>
                    <!-- 购物车详情 -->
                    <div id="right-main">
                        <table class="table">
                            <tr height="50px">
                                <th>商品信息</th>
                                <th width="10%">单价</th>
                                <th width="10%">数量</th>
                                <th width="10%">金额</th>
                                <th width="15%">操作</th>
                            </tr>
                            <!-- shopping cart height -->
                            <tr>
                                <td>
                                    <ul class="goods">
                                        <li>
                                            <input type="checkbox"/>
                                        </li>
                                        <li>
                                            <img src="2.jpg" alt="" class="goods-img"/>
                                        </li>
                                        <li>
                                            <a href="#&num=1">商品描述以及链接asdhaksjhkaj</a>
                                        </li>
                                        <li>
                                            <p>商品的具体描述以及尺寸神码的adasdhdhkjashdkjasdkjhhsk</p>
                                        </li>
                                    </ul>
                                </td>
                                <td><label>￥99.00</label></td>
                                <td><input type="number" min="1" max="999" placeholder="1-999"/></td>
                                <td><label>￥99.00</label></td>
                                <td><a href="#&num=1">删除</a></td>
                            </tr>
                            <!-- shopping cart height -->
                            <tr>
                                <td>
                                    <ul class="goods">
                                        <li>
                                            <input type="checkbox"/>
                                        </li>
                                        <li>
                                            <img src="2.jpg" alt="" class="goods-img"/>
                                        </li>
                                        <li>
                                            <a href="#&num=1">商品描述以及链接asdhaksjhkaj</a>
                                        </li>
                                        <li>
                                            <p>商品的具体描述以及尺寸神码的adasdhdhkjashdkjasdkjhhsk</p>
                                        </li>
                                    </ul>
                                </td>
                                <td><label>￥99.00</label></td>
                                <td><input type="number" min="1" max="999" placeholder="1-999"/></td>
                                <td><label>￥99.00</label></td>
                                <td><a href="#&num=1">删除</a></td>
                            </tr>
                        </table>
                        <!-- 购物车结束 -->
                        <!-- 结算处 -->
                        <div id="bar">
                            <div>
                                <label>已选:</label>
                                <em>9</em>
                                个商品
                            </div>
                            <div>
                                <label>合计:</label>
                                <em>￥123.00</em>
                            </div>
                            <div>
                                <input type="submit" value="结算" style=""/>
                            </div>
                        </div>
                    </div>
                    <!-- right end... -->
                </div>
            </div>
        </div>
    </body>
</html>
